@import '../mixins/set-color';

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: @scrollbar-track-bg;
  border-radius: 3px;
  box-shadow: inset 0 0 5px fadein(@scrollbar-track-bg,4%);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: @scrollbar-thumb-bg;
  border-radius: 3px;
  box-shadow: inset 0 0 10px fadein(@scrollbar-thumb-bg,8%);
}

.vars(){
  primary:@primary-color;
  success: @success-color;
  warning: @warning-color;
  error: @error-color;
}

.text-vars(){
  primary: @text-color;
  secondary: @text-color-secondary;
  inverse: @text-color-inverse;
}

:root {
  each(.vars(), {
    --po-color-@{key}: @value;
  })
  each(.text-vars(), {
    --po-text-@{key}: @value;
  })
  --po-color-link: @link-color;
  --po-component-background: @component-background;
  --po-body-background: @body-background;
}

each(.vars(),{
  .set-color(@key,@value)
})


@blue: { 
  lighten-5: @blue-1;
  lighten-4: @blue-2;
  lighten-3: @blue-3;
  lighten-2: @blue-4;
  lighten-1: @blue-5;
  base: @blue-6;
  darken-1: @blue-7;
  darken-2: @blue-8;
  darken-3: @blue-9;
  darken-4: @blue-10;
};

@purple: {
  lighten-5: @purple-1;
  lighten-4: @purple-2;
  lighten-3: @purple-3;
  lighten-2: @purple-4;
  lighten-1: @purple-5;
  base: @purple-6;
  darken-1: @purple-7;
  darken-2: @purple-8;
  darken-3: @purple-9;
  darken-4: @purple-10;
};

@cyan: { 
  lighten-5: @cyan-1;
  lighten-4: @cyan-2;
  lighten-3: @cyan-3;
  lighten-2: @cyan-4;
  lighten-1: @cyan-5;
  base: @cyan-6;
  darken-1: @cyan-7;
  darken-2: @cyan-8;
  darken-3: @cyan-9;
  darken-4: @cyan-10;
};

@green: {  
  lighten-5: @green-1;
  lighten-4: @green-2;
  lighten-3: @green-3;
  lighten-2: @green-4;
  lighten-1: @green-5;
  base: @green-6;
  darken-1: @green-7;
  darken-2: @green-8;
  darken-3: @green-9;
  darken-4: @green-10;
};

@magenta: { 
  lighten-5: @magenta-1;
  lighten-4: @magenta-2;
  lighten-3: @magenta-3;
  lighten-2: @magenta-4;
  lighten-1: @magenta-5;
  base: @magenta-6;
  darken-1: @magenta-7;
  darken-2: @magenta-8;
  darken-3: @magenta-9;
  darken-4: @magenta-10;
};

@pink: { 
  lighten-5: @pink-1;
  lighten-4: @pink-2;
  lighten-3: @pink-3;
  lighten-2: @pink-4;
  lighten-1: @pink-5;
  base: @pink-6;
  darken-1: @pink-7;
  darken-2: @pink-8;
  darken-3: @pink-9;
  darken-4: @pink-10;
};

@red: {
  base: @red-base;
  lighten-5: @red-1;
  lighten-4: @red-2;
  lighten-3: @red-3;
  lighten-2: @red-4;
  lighten-1: @red-5;
  darken-1: @red-7;
  darken-2: @red-8;
  darken-3: @red-9;
  darken-4: @red-10;
};

@orange: {  
  lighten-5: @orange-1;
  lighten-4: @orange-2;
  lighten-3: @orange-3;
  lighten-2: @orange-4;
  lighten-1: @orange-5;
  base: @orange-6;
  darken-1: @orange-7;
  darken-2: @orange-8;
  darken-3: @orange-9;
  darken-4: @orange-10;
};

@yellow: { 
  lighten-5: @yellow-1;
  lighten-4: @yellow-2;
  lighten-3: @yellow-3;
  lighten-2: @yellow-4;
  lighten-1: @yellow-5;
  base: @yellow-6;
  darken-1: @yellow-7;
  darken-2: @yellow-8;
  darken-3: @yellow-9;
  darken-4: @yellow-10;
};

@volcano: { 
  lighten-5: @volcano-1;
  lighten-4: @volcano-2;
  lighten-3: @volcano-3;
  lighten-2: @volcano-4;
  lighten-1: @volcano-5;
  base: @volcano-6;
  darken-1: @volcano-7;
  darken-2: @volcano-8;
  darken-3: @volcano-9;
  darken-4: @volcano-10;
};

@geekblue: { 
  lighten-5: @geekblue-1;
  lighten-4: @geekblue-2;
  lighten-3: @geekblue-3;
  lighten-2: @geekblue-4;
  lighten-1: @geekblue-5;
  base: @geekblue-6;
  darken-1: @geekblue-7;
  darken-2: @geekblue-8;
  darken-3: @geekblue-9;
  darken-4: @geekblue-10;
};

@lime: { 
  lighten-5: @lime-1;
  lighten-4: @lime-2;
  lighten-3: @lime-3;
  lighten-2: @lime-4;
  lighten-1: @lime-5;
  base: @lime-6;
  darken-1: @lime-7;
  darken-2: @lime-8;
  darken-3: @lime-9;
  darken-4: @lime-10;
};

@gold: {  
  lighten-5: @gold-1;
  lighten-4: @gold-2;
  lighten-3: @gold-3;
  lighten-2: @gold-4;
  lighten-1: @gold-5;
  base: @gold-6;
  darken-1: @gold-7;
  darken-2: @gold-8;
  darken-3: @gold-9;
  darken-4: @gold-10;
};

@primary: {  
  lighten-5: @primary-1;
  lighten-4: @primary-2;
  lighten-3: @primary-3;
  lighten-2: @primary-4;
  lighten-1: @primary-5;
  base: @primary-6;
  darken-1: @primary-7;
  darken-2: @primary-8;
  darken-3: @primary-9;
  darken-4: @primary-10;
};

@grey: {  
  lighten-5: #fafafa;
  lighten-4: #f5f5f5;
  lighten-3: #eeeeee;
  lighten-2: #e0e0e0;
  lighten-1: #bdbdbd;
  base: #9e9e9e;
  darken-1: #757575;
  darken-2: #616161;
  darken-3: #424242;
  darken-4: #212121;
};

@shades: {
  white: #fff;
  black: #000;
  transparent: transparent;
};


@selector-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
purple, primary, grey, shades;

each(@selector-colors,.(@root-value){
  each(@@root-value,.(@value,@key){
    & when(@key = base){
      .set-color(@root-value,@value) !important;
    }
    & when not (@key = base){
      .set-color(@root-value,@value,@key) !important;
    }
  })
})
